<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '时光轴',
    backgroundColor: '#ffffff',
  },
}
</route>

<template>
  <view class="page">
    <!-- 时间线列表 -->
    <scroll-view class="timeline-list" scroll-y @scrolltolower="loadMore">
      <view class="timeline-item" v-for="memory in memories" :key="memory.id">
        <view class="time-point"></view>
        <view class="time-line"></view>

        <view class="memory-card">
          <view class="memory-header">
            <text class="date">{{ memory.date }}</text>
            <text class="location" v-if="memory.location">
              {{ memory.location }}
            </text>
          </view>

          <text class="title">{{ memory.title }}</text>

          <view class="image-grid" v-if="memory.images.length">
            <image
              v-for="(image, index) in memory.images"
              :key="index"
              :src="image"
              mode="aspectFill"
              @click="previewImage(memory.images, index)"
            />
          </view>

          <text class="content">{{ memory.content }}</text>

          <view class="memory-footer">
            <view class="action-btn">
              <wd-icon name="heart" size="32rpx" color="#94a3b8" />
              <text>{{ memory.likes }}</text>
            </view>
            <view class="action-btn">
              <wd-icon name="comment" size="32rpx" color="#94a3b8" />
              <text>{{ memory.comments }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="loading" v-if="loading">加载中...</view>
      <view class="no-more" v-if="noMore">没有更多了</view>
    </scroll-view>

    <!-- 悬浮添加按钮 -->
    <view class="fab-btn" @click="navigateToCreate">
      <wd-icon name="plus" size="48rpx" color="#fff" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 模拟数据
const memories = ref([
  {
    id: 1,
    date: '2024-03-20',
    title: '春日野餐',
    content: '今天和朋友们一起去郊游，天气特别好，野餐很开心...',
    images: [
      'https://images.pexels.com/photos/1660995/pexels-photo-1660995.jpeg',
      'https://images.pexels.com/photos/1660995/pexels-photo-1660995.jpeg',
    ],
    location: '城市公园',
    likes: 12,
    comments: 5,
  },
  // ... 更多数据
])

const loading = ref(false)
const noMore = ref(false)

// 加载更多
const loadMore = async () => {
  if (loading.value || noMore.value) return
  loading.value = true
  // TODO: 实现加载更多逻辑
  setTimeout(() => {
    loading.value = false
    // noMore.value = true
  }, 1000)
}

// 预览图片
const previewImage = (urls: string[], current: number) => {
  uni.previewImage({
    urls,
    current: urls[current],
  })
}

// 跳转到创建页面
const navigateToCreate = () => {
  uni.navigateTo({
    url: '/pages/memory/create',
  })
}

// 获取笔记列表
const getNotes = (collectionId?: number) => {
  // 如果指定了集合ID，只显示该集合的笔记
  if (collectionId) {
    const collection = collections.find((c) => c.id === collectionId)
    return collection ? collection.notes : []
  }

  // 否则显示所有笔记
  return collections.flatMap((c) => c.notes)
}

// 添加筛选器
const filter = ref({
  collectionId: null as number | null,
  startDate: null as string | null,
  endDate: null as string | null,
})
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  padding: 32rpx 0;
  background: #f8fafc;
}

.timeline-list {
  height: 100vh;
}

.timeline-item {
  position: relative;
  padding-left: 72rpx;
  margin-bottom: 48rpx;

  .time-point {
    position: absolute;
    top: 32rpx;
    left: 32rpx;
    z-index: 2;
    width: 16rpx;
    height: 16rpx;
    background: #2563eb;
    border: 4rpx solid #eff6ff;
    border-radius: 50%;
  }

  .time-line {
    position: absolute;
    top: 0;
    bottom: -48rpx;
    left: 39rpx;
    width: 2rpx;
    background: #e2e8f0;
  }
}

.memory-card {
  padding: 32rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

  .memory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;

    .date {
      font-size: 24rpx;
      color: #64748b;
    }

    .location {
      font-size: 24rpx;
      color: #94a3b8;
    }
  }

  .title {
    display: block;
    margin-bottom: 16rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #0f172a;
  }

  .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8rpx;
    margin-bottom: 16rpx;

    image {
      width: 100%;
      height: 200rpx;
      object-fit: cover;
      border-radius: 12rpx;
    }
  }

  .content {
    display: block;
    margin-bottom: 24rpx;
    font-size: 28rpx;
    line-height: 1.6;
    color: #334155;
  }

  .memory-footer {
    display: flex;
    gap: 32rpx;

    .action-btn {
      display: flex;
      gap: 8rpx;
      align-items: center;

      text {
        font-size: 24rpx;
        color: #94a3b8;
      }
    }
  }
}

.fab-btn {
  position: fixed;
  right: 32rpx;
  bottom: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96rpx;
  height: 96rpx;
  background: #2563eb;
  border-radius: 50%;
  box-shadow: 0 4rpx 16rpx rgba(37, 99, 235, 0.2);

  &:active {
    transform: scale(0.95);
  }
}

.loading,
.no-more {
  padding: 32rpx;
  font-size: 24rpx;
  color: #94a3b8;
  text-align: center;
}
</style>
